<template>
  <div class="app-container">
    <!-- 基础信息 -->
    <h5 class="titleInfo">
      基础信息
    </h5>
    <el-form ref="form"   :rules="rules" :model="form" label-width="130px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="医院名称" prop="name">
            <el-input v-model="form.name" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="医院简介" prop="description">
            <el-input v-model="form.description" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="省市区" prop="provinceId">
            <el-cascader v-model="selectedOptions" :options="options" @change="pcaList" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="详细地址" prop="address">
            <el-input v-model="form.address" />
            <el-button type="text" @click="getLngLat">
              获取经纬度
            </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否上架" prop="status">
            <el-select v-model="form.status" placeholder="请选择">
              <el-option v-for="item in statusOption" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属分公司" prop="officeId">
            <!-- <el-input v-model="form.officeId"></el-input> -->
            <el-select v-model="form.officeId" placeholder="请选择">
              <el-option v-for="item in officeOption" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="经度" prop="lng">
            <el-input v-model="form.lng" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="纬度" prop="lat">
            <el-input v-model="form.lat" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="医院标签" prop="tagsId">
            <!-- <el-input v-model="form.tagsId"></el-input> -->
            <el-select v-model="form.tagsId" placeholder="请选择">
              <el-option v-for="item in tagOption" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="贷款平台">
           
            <el-select v-model="form.loanId" placeholder="请选择">
              <el-option v-for="item in loanOption" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item label="每日可预约次数" prop="appointmentNum">
            <el-input v-model="form.appointmentNum" @blur="numBlur" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 图片信息 -->
      <div class="divBar" />
      <h5 class="titleInfo">
        图片信息
      </h5>
      <el-row>
        <el-col :span="24">
          <el-form-item label="LOGO" prop="logo">
            <newUpload ref="uploadImg1" :fileNum="fileNum1" :fileList="fileList1" :width='imgWeith1' :height="imgHeight1" />
            <p>图片尺寸800px*800px</p>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="医院图片" prop="imageList">
            <newUpload ref="uploadImg2" :fileNum="fileNum2" :fileList="fileList2" :width='imgWeith2' :height="imgHeight2" />
            <p>最多添加4张图片，图片尺寸800px*600px</p>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="医院描述">
            <Tinymce v-if="flag" v-model="form.content" style="width:96%" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-form-item>
        <el-button style="margin:30px 0" type="primary" @click="submitFn('form')">立即提交</el-button>
      </el-form-item> -->
    </el-form>
  </div>
</template>
<script>
import newUpload from "@/components/imgUpload/index";
import Tinymce from "@/components/Tinymce";
import { hospitalAdd, getGPS } from "@/api/hospitalAdd";
import { hospitalDetail, updateHospital } from "@/api/hospitalEdit";
import { companyList } from "@/api/branchOfficeDropDown";
import { loanDropDown } from "@/api/loanDropDown";
import { findHospitalTagsList } from "@/api/hospitalLabel";

export default {
  name: "HospitalInfo",
  components: { newUpload, Tinymce },
  data() {
    return {
      imgWeith1: 800,
      imgHeight1: 800,
      imgWeith2: 800,
      imgHeight2: 600,
      flag: true,
      fileNum1: 1,
      fileNum2: 4,
      fileList1: [],
      fileList2: [],
      officeOption: [],
      // hideUpload2:false,
      hideUpload3: false,
      hideUpload4: false,
      hideUpload5: false,
      userId: "",
      statusOption: [
        {
          value: 0,
          label: "是"
        },
        {
          value: 1,
          label: "否"
        }
      ],
      form: {
        name: "",
        tagsId: "",
        description: "",
        provinceId: "",
        cityId: "",
        address: "",
        lng: "",
        lat: "",
        status: "",
        loanId: "",
        officeId: "",
        appointmentNum: "",
        logo: "",
        star: "1",
        imageList: [],
        content: ""
      },
      tagOption: [],
      rules: {
        name: [{ required: true, message: "请输入医院名称", trigger: "blur" }],
        description: [
          { required: true, message: "请输入医院简介", trigger: "blur" }
        ],
        address: [
          { required: true, message: "请输入详细地址", trigger: "blur" }
        ],
        status: [
          { required: true, message: "请选择是否上架", trigger: "blur" }
        ],
        lng: [{ required: true, message: "请输入经度", trigger: "blur" }],
        lat: [{ required: true, message: "请输入纬度", trigger: "blur" }],
        officeId: [
          { required: true, message: "请选择所属分公司", trigger: "blur" }
        ],
        provinceId: [
          { required: true, message: "请输入省市区", trigger: "blur" }
        ],
        tagsId: [
          { required: true, message: "请选择医院标签", trigger: "blur" }
        ],
        appointmentNum: [
          { required: true, message: "请输入每日预约次数", trigger: "blur" }
        ],
        logo: [{ required: true, message: "请上传医院logo", trigger: "blur" }],
        imageList: [
          { required: true, message: "请上传医院图片", trigger: "blur" }
        ],
        content: [
          { required: true, message: "请输入医院描述", trigger: "blur" }
        ]
      },
      options: [],
      loanOption: [],
      selectedOptions: [],
      list1: {},
      submitForm: {}
    };
  },
  created() {
    this.userId = this.$route.query.userId + "";
    // 省市区数据获取
    var addData = require("../../../../static/address/area.json");
    this.options = addData;
    // 分公司列表
    this.getCompanyList();
  },
  inject: ["reload"],
  mounted() {
    this.imgWeith2 = 750;
    this.imgHeight2 = 422;
    this.getInfo();
  },
  methods: {
    // 获取经纬度
    getLngLat() {
      const datas = {
        id: this.form.address
      };
      getGPS(datas).then(res => {
        console.log(res);
        if (!res.data.code) {
          this.form.lng = res.data.data.lng;
          this.form.lat = res.data.data.lat;
        } else {
          this.$message({
            message: res.data.msg,
            type: "warning"
          });
        }
      });
    },
    // 可预约次数校验
    numBlur() {
      const reg = /^([1-9]\d+)|([2-9])$/;
      var re = new RegExp(reg);
      if (!re.test(this.form.appointmentNum)) {
        this.form.appointmentNum = null;
      }
    },
    getInfo() {
      const datas = { id: this.userId };
      // console.log(datas)
      hospitalDetail(datas).then(res => {
        // console.log(res)
        this.form = res.data.data;
        this.selectedOptions = [res.data.data.provinceId, res.data.data.cityId];
        this.fileList1 = [
          {
            url: localStorage.getItem("imgUrlPrefix") + res.data.data.logo
          }
        ];
        res.data.data.imageList.forEach((e, index) => {
          // if(index==0){
          // this.hideUpload2 = true
          this.fileList2.push({
            url:
              localStorage.getItem("imgUrlPrefix") +
              res.data.data.imageList[index]
          });
        });
        this.$refs.uploadImg1.getLength(this.fileList1)
        this.$refs.uploadImg2.getLength(this.fileList2)
      });
    },
    // 获取分公司列表
    getCompanyList() {
      companyList()
        .then(res => {
          const resData = res.data.data;
          const newData = [];
          resData.forEach(e => {
            newData.push({
              value: e.id,
              label: e.name
            });
          });
          this.officeOption = newData;
        })
        .catch(error => {
          this.$message.error(error);
        });
      loanDropDown().then(res => {
        const resData = res.data.data;
        const newData = [];
        resData.forEach(e => {
          newData.push({
            value: e.id,
            label: e.name
          });
        });
        this.loanOption = newData;
        // console.log(newData)
      });
      // 获取医院标签
      const datas = {
        pageNum: 1,
        pageSize: 999
      };
      findHospitalTagsList(datas).then(res => {
        const resData = res.data.data.list;
        const newData = [];
        resData.forEach(e => {
          newData.push({
            value: e.id,
            label: e.name
          });
        });
        this.tagOption = newData;
      });
    },
    // 省市区数据改变
    pcaList(value) {
      let e = this.selectedOptions;
      e = value;
      this.form.provinceId = e[0];
      this.form.cityId = e[1];
      // this.form.area = e[2]
    },
    // 字符串截取
    getCaption(obj) {
      var index = obj.lastIndexOf(".com");
      obj = obj.substring(index + 4, obj.length);
      // obj.match(/com(\S*)/)[1];
      return obj;
    },
  }
};
</script>
<style scoped>
.app-container {
  padding: 0px !important;
}
</style>
